<template>
	<el-row type="flex" class="row-bg">
		<el-col :span="6">
			<dv-border-box-13>
				<div class="sushe">
				<div class="title-h1">[学生测温]<span>今日已检测学生{{user_temperature_number}}人</span></div>
				<el-row :gutter="20">
					<el-col :span="16">
						<dv-charts :option="configDataPie" style="width:100%; height:200px;" />
					</el-col>
				  <el-col :span="8"><p class="yichang">发现异常0人</p></el-col>
				</el-row>
				</div>
			</dv-border-box-13>
		</el-col>
		<el-col :span="6">
			<dv-border-box-13>
				<div class="sushe">
				<div class="title-h1">[课堂评价班级榜]</div>
				<dv-charts :option="configPingjia" style="width:100%; height:220px;" />
				</div>
			</dv-border-box-13>
		</el-col>
		<el-col :span="6">
			<dv-border-box-13>
				<div class="sushe">
				<div class="title-h1">[课堂评价个人榜]</div>
				<dv-charts :option="configPingjiaG" style="width:100%; height:220px;" />
				</div>
			</dv-border-box-13>
		</el-col>
		<el-col :span="6">
			<dv-border-box-13>
				<div class="susheright" style="height: 200px; margin-top: 0px;">
					<div class="data4-box" style="width:92%;height:220px;top:0%;position: relative;margin: 0px auto;">
							<dv-charts :option="data5" />
						</div>
				</div>
			</dv-border-box-13>
		</el-col>
		
	</el-row>
</template>
<script>
import { template as templateApi, appraises as appraisesApi } from '@/api/app'
import { getValueFromList } from '@/utils/function'
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data() {
		return {
			data5: {},
      data6: {},
      name: '左眼',
      configDataPie: {},
      configPingjia: {},
      configPingjiaG: {},
      user_temperature_number: 0,
      department: [],
      person: []
		}
	},
	created() {
		templateApi({school_id: this.$route.query.school_id}).then(res=> {
			this.user_temperature_number = res.user_temperature_number
			console.log(res)
		})
		appraisesApi({school_id: this.$route.query.school_id}).then(res=> {
			this.department = res.department
			this.person = res.person
			this.configPie()
			this.configPing()

		})
		this.$watch('rows', () => {
			this.firstData('左眼', 6)
			this.firstData('左眼', 5)
			
			setInterval(res=> {
				var name = this.name
				if(this.name == '左眼') {
					name = '右眼'
				}else{
					name = '左眼'
				}
				this.name = name
				this.firstData(name, 6)
				this.firstData(name, 5)
			}, 3000)
		})
	},
	methods: {
		configPing(){
			this.configPingjia = {
			  title: {
			    show: false
			  },
			  grid: {
			  	top: '10%'
			  },
			  xAxis: {
			    data: getValueFromList(this.department, 'name'),
					axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff'
            }
          },
			  },
			  yAxis: {
			    data: 'value',
			    axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
			  },
			  series: [
			    {
			      data: getValueFromList(this.department, 'point'),
			      type: 'bar',
			      label: {
			      	show: true,
			      	style: {
							  fill: '#fff'
							}
			      }
			    }
			  ]
			}
			this.configPingjiaG = {
			  title: {
			    show: false
			  },
			  grid: {
			  	top: '10%'
			  },
			  xAxis: {
			    data: getValueFromList(this.person, 'name'),
					axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff'
            }
          },
			  },
			  yAxis: {
			    data: 'value',
			    axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
			  },
			  series: [
			    {
			      data: getValueFromList(this.person, 'point'),
			      type: 'bar',
			      label: {
			      	show: true,
			      	style: {
							  fill: '#fff'
							}
			      }
			    }
			  ]
			}
		},
		configPie(){
			this.configDataPie = {
			  title: {
			    show: false
			  },
			  series: [
			    {
			      type: 'pie',
			      data: [
			        { name: '正常', value: 100 },
			        { name: '异常', value: 0 },
			      ],
			      insideLabel: {
			        show: true
			      },
			      outsideLabel: {
			      	show: true
			      }
			    }
			  ],
			  color: ['#00baff', 'red']
			}

		},
		firstData(name, type) {
			var seriesData = []
			if(name == '左眼') {
				if(type == 6) {
					seriesData = [this.rows.data.left6data50, this.rows.data.left6data49, this.rows.data.left6data46, this.rows.data.left6data45]
				}else{
					seriesData = [this.rows.data.left5data50, this.rows.data.left5data49, this.rows.data.left5data46, this.rows.data.left5data45]
				}
				
			}else{
				if(type == 6) {
					seriesData = [this.rows.data.right6data50, this.rows.data.right6data49, this.rows.data.right6data46, this.rows.data.right6data45]
				}else{
					seriesData = [this.rows.data.right5data50, this.rows.data.right5data49, this.rows.data.right5data46, this.rows.data.right5data45]
				}
				
			}
			var text = '小学'
			if(type == 5)text = '初中' 
			var data = {
				title: {
					text: text + '视力趋势' + this.name,
					style: {
					  fill: '#ffc600',
					  fontSize: 17,
					  fontWeight: 'bold',
					  textAlign: 'center',
					  textBaseline: 'bottom'
					}
				},
        legend: {
          data: [
          	{name: name + '5.0及以上', color: '#9fe6b8'},
          	{name: name + '4.9', color: '#ffdb5c'},
          	{name: name + '4.6到4.8', color: '#ff9f7f'},
          	{name: name + '4.5及以下', color: '#fb7293'}
          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: this.rows.data.dates,
          // name: name,
          nameTextStyle: {
					  fill: '#fff',
					  fontSize: 20
					},
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
        },
        yAxis: {
          data: 'value',
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          min: 0
        },
        series: [
          {
            data: seriesData[0],
            type: 'line',
            name: name + '5.0及以上',
            lineStyle: {
						  stroke: '#9fe6b8'
						}
          },
          {
            data: seriesData[1],
            type: 'line',
            name: name + '4.9',
            lineStyle: {
						  stroke: '#ffdb5c'
						}
          },
          {
            data: seriesData[2],
            type: 'line',
            name: name + '4.6到4.8',
            lineStyle: {
						  stroke: '#ff9f7f'
						}
          },
          {
            data: seriesData[3],
            type: 'line',
            name: name + '4.5及以下',
            lineStyle: {
						  stroke: '#fb7293'
						}
          }
        ]
      
      }
      if(type == 6) {
      	this.data6 = data
      }else{
      	this.data5 = data
      }
		}
	}
}
</script>
<style lang="less" scope>
.sushe{ height: 200px; width: 90%;margin: 30px auto; padding-top: 10px;margin-top: 0px; }
.sushe .title-h1{ padding-top: 20px; }
.sushe .title-h1 span{float:right; color:#54fd02; }
.yichang{ font-size: 18px; color: #ffc600; border-bottom: 1px solid #ffc600; line-height: 40px; margin-top: 60px;}
</style>